import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Tag } from 'antd';
import { connect } from 'umi';
import moment from 'moment';
import AdviseSearch from './AdviseSearch';

const currControl = 'Edu_Advise';
class ViewContent extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      visible: false,
      selectedRowKeys: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      params: {},
      defaultParams: {},
    };
  }
  componentDidMount() {
    this.fetchDatas();
  }
  fetchDatas = () => {
    this.setState({ loading: true });
    const { pageIndex, pageSize, params } = this.state;
    this.props
      .dispatch({
        type: 'Abp/getList',
        payload: {
          skipCount: (pageIndex - 1) * pageSize,
          maxResultCount: pageSize,
          ...params,
        },
        control: currControl,
      })
      .then(() => {
        var resp = this.props.response.result;
        console.log(resp);

        if (resp) {
          var dataSource = resp.items;
          this.setState({ loading: false, dataSource, totalCount: resp?.totalCount });
        }
      });
  };
  onSelectChange = (selectedRowKeys: any) => {
    this.setState({ selectedRowKeys });
  };
  handleSearch = (values: any) => {
    this.setState(
      {
        params: {
          nickname: values.nickname,
          content: values.content,
        },
      },
      this.fetchDatas,
    );
  };
  handlePageChange = (pageNumber: any, pageSize: any) => {
    this.setState(
      {
        pageIndex: pageNumber,
        pageSize,
      },
      this.fetchDatas,
    );
  };
  render() {
    const { dataSource, loading, selectedRowKeys, pageSize, totalCount, defaultParams } =
      this.state;
    const columns: any = [
      {
        title: '序号',
        key: 'index',
        width: 60,
        align: 'center',
        render: (_: any, __: any, i: any) => {
          return i + 1;
        },
      },
      {
        title: '反馈者昵称',
        dataIndex: 'members',
        width: 130,
        align: 'center',
        render: (text: any) => {
          return text.nickname;
        },
      },
      //   {
      //     title: '反馈者手机号',
      //     dataIndex: 'members',
      //     width: 130,
      //     render: (text: any) => {
      //       return text.mobile;
      //     },
      //   },
      {
        title: '意见评分',
        dataIndex: 'score',
        width: 100,
        align: 'center',
        render: (text: string) => <Tag color="red">{text}</Tag>,
      },
      {
        title: '意见内容',
        dataIndex: 'content',
        ellipsis: true,
      },
      {
        title: '发布时间',
        dataIndex: 'creationTime',
        render: (text: string) => <span>{moment(text).format('YYYY-MM-DD HH:MM:SS')}</span>,
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <PageHeaderWrapper title={false}>
        <Card>
          <AdviseSearch defaultParams={{ ...defaultParams }} onSearch={this.handleSearch} />
          <Table
            rowKey="id"
            loading={loading}
            rowSelection={rowSelection}
            columns={columns}
            dataSource={dataSource}
            pagination={{
              total: Number(totalCount),
              showSizeChanger: true,
              pageSize: Number(pageSize),
              size: 'small',
              pageSizeOptions: ['10', '25', '50'],
              onChange: this.handlePageChange,
              onShowSizeChange: this.handlePageChange,
              showTotal: (totalCount) => `总计 ${totalCount} 条数据`,
            }}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp, Article }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
  Article,
}))(ViewContent);
